<script lang="ts" setup>
import { userGroupListApi, preOnlineApi } from "@/api/activity";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    required: true,
  }
});
const form: any = ref({
  oprType: 0,
  actId: '',
  userGroupId: '',
  importTypeCode: 'phone',
  phonesList: []
});
const userGroupList = ref([])
const formRef = ref();
const rules = {
  oprType: [ { required: true, message: "请选择", trigger: "blur" } ],
  userGroupId: [ { required: true, message: "请选择客群", trigger: "blur" } ],
  phonesList: [ { required: true, message: "请填写手机号", trigger: "blur" } ],
};
const phonesList = ref('');
const emits = defineEmits([ "update:show", "confirm" ]);
const submitLoading = ref(false);
const resetForm = () => {
  form.value = {
    oprType: 0,
    actId: '',
    userGroupId: '',
    importTypeCode: 'phone',
    phonesList: []
  }
  phonesList.value = ''
}
// 提交
const submitForm = () => {
  form.value.actId = props.id;
  let flag = false
  if (phonesList.value.length > 0) {
    form.value.phonesList = phonesList.value.split(";");
    for (let i = 0; i < form.value.phonesList.length; i++) {
      if (!(/^[1]([3-9])[0-9]{9}$/.test(form.value.phonesList[i]))) {
        flag = true
        break
      }
    }
  }
  if (flag && form.value.oprType == 1) {
    ElMessage.info("请检查输入的手机号格式是否正确")
    return
  }
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      submitLoading.value = true;
      let rs = await preOnlineApi(form.value);
      if (rs.code == 200) {
        emits("update:show", false);
        emits("confirm", true);
      }
      submitLoading.value = false;
      resetForm()
    }
  });
};

const onClose = () => {
  resetForm()
  emits("update:show", false);
  emits("confirm", false);
};
const getUserGroupList = async () => {
  let rs = await userGroupListApi({
    currentPage: 1,
    showCount: -1
  });
  if (rs.code == 200) {
    userGroupList.value = rs.payload
  }
}
onMounted(() => {
  getUserGroupList()
});
</script>
<template>
  <Dialog
    :model-value="show"
    title="活动预上线"
    :loading="submitLoading"
    :width="700"
    @confirm="submitForm"
    @close="onClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="auto"
      :validate-on-rule-change="false"
    >
      <el-form-item
        label="测试名单"
        prop="oprType"
      >
        <el-radio-group v-model="form.oprType">
          <el-radio :label="0">
            选择客群
          </el-radio>
          <el-radio :label="1">
            手机号
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="form.oprType == 0"
        label="客群"
        prop="userGroupId"
      >
        <el-select
          v-model="form.userGroupId"
          placeholder="请选择客群"
          clearable
          filterable
        >
          <el-option
            v-for="item in userGroupList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.oprType == 1"
        label="手机号"
        prop="phonesList"
      >
        <el-input
          v-model.trim="phonesList"
          type="textarea"
          placeholder="请输入手机号"
          :autosize="{ minRows: 2, maxRows: 5 }"
          show-word-limit
        />
        <div class="tips">
          ​多条数据请用分号分开,例如15534345656;16532324344
        </div>
      </el-form-item>
    </el-form>
  </Dialog>
</template>